﻿import React, { useState } from 'react';

import { LaptopOutlined, UserOutlined, VerticalLeftOutlined, VideoCameraOutlined } from '@ant-design/icons';

import { Layout, Menu, Button, Image, Typography } from 'antd';

import { useNavigate } from 'react-router-dom';

const { Header, Content, Sider } = Layout;
const { Text } = Typography;
// 定义二级菜单项
const items2 = [
    {
        icon: <UserOutlined />,
        label: "启动会议",
        key: 'startMeeting',
    },
    {
        icon: <LaptopOutlined />,
        label: "历史会议",
        key: 'historyMeeting',
    },
];
// 用户账户页面的路径
const userAccountPath = '/Userinf';
const historyMeetingPath = '/historyMeeting'; // 历史会议页面的路径
const joinMeetingPath = '/joinMeeting'; // 启动会议页面的路径
const newVideoPath = '/newMeeting'; // 创建会议页面的路径

function Svideo() {
    const navigate = useNavigate();
    const handleMenuClick = (e) => {
        if (e.key === 'startMeeting') {
            navigate('/svideo'); // 跳转到当前页面
        } else if (e.key === 'historyMeeting') {
            navigate(historyMeetingPath); // 跳转到历史会议页面
        }
    };

    // 为“参加会议”按钮设置状态
    const [hoveredJoin, setHoveredJoin] = useState(false);
    const [activeJoin, setActiveJoin] = useState(false);
    // 为“创建会议”按钮设置状态
    const [hoveredCreate, setHoveredCreate] = useState(false);
    const [activeCreate, setActiveCreate] = useState(false);
    const handleMouseEnterJoin = () => {
        setHoveredJoin(true);
    };

    const handleMouseLeaveJoin = () => {
        setHoveredJoin(false);
    };
    const handleMouseDownJoin = () => {
        setActiveJoin(true);
    };

    const handleMouseUpJoin = () => {

        setActiveJoin(false);

    };
    const handleMouseEnterCreate = () => {
        setHoveredCreate(true);
    };
    const handleMouseLeaveCreate = () => {
        setHoveredCreate(false);
    };

    const handleMouseDownCreate = () => {
        setActiveCreate(true);
    };

    const handleMouseUpCreate = () => {
        setActiveCreate(false);
    };

    const buttonStyle = (hovered, active) => ({
        backgroundColor: 'gray',
        border: '1px solid #ccc',
        width: '100px',
        height: '100px',
        borderRadius: '50px', // 使按钮更圆
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        transition: 'all 0.3s ease', // 添加过渡动画
        boxShadow: '0 4px 8px rgba(0,0,0,0.1)', // 添加阴影
        ...(hovered && !active && {
            transform: 'scale(1.1)',
            boxShadow: '0 8px 16px rgba(0,0,0,0.2)',
        }),
        ...(active && {
            transform: 'scale(0.9)',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        }),
    });

    return (
        <Layout style={{ height: '100vh', margin: 0 }}>
            <Header
                style={{
                     display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    width: '100%',
                    height: '64px',
                    backgroundColor: 'white',
                    borderBottom: '1px solid #e8e8e8',
                }}
            >
                <Image src='/logo.png' preview={false} style={{ width:'70px' ,marginLeft: '-50px', marginTop: '-10px'}} />
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                        items={[]}
                        style={{ flex: 1, minWidth: 0 }}
                    />

                    {/*用户跳转 */}
                    <Button
                        type="primary"
                        shape="circle"
                        icon={<UserOutlined style={{ fontSize: '20px' }} />}
                        size="large"
                        onClick={() => navigate(userAccountPath)}
                        style={{ backgroundColor: 'blue', border: '1px solid #ccc' }}
                    >
                    </Button>
                </div>
            </Header>

            {/* 侧边栏 */}
            <Layout>
                <Sider
                    width={200}
                    style={{ background: '#fff', borderRight: '1px solid #e8e8e8' }}
                >
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        items={items2}
                        onSelect={handleMenuClick} // 使用 onSelect 而不是 onClick
                        style={{ height: '100%', borderRight: 0 }}
                    />
                </Sider>
                {/*  主要内容*/}
                <Layout style={{ padding: 0 }}>
                    <Content
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 'calc(100vh - 64px)',
                            background: '#fff',
                            display: 'flex', // 使用Flexbox布局
                            flexDirection: 'row', // 水平排列
                            alignItems: 'center', // 垂直居中
                            justifyContent: 'center', // 水平居中
                        }}
                    >
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                            <Button
                                type="primary"
                                shape="circle"
                                icon={<VerticalLeftOutlined />}
                                size="large"
                                style={buttonStyle(hoveredJoin, activeJoin)}
                                onMouseEnter={handleMouseEnterJoin}
                                onMouseLeave={handleMouseLeaveJoin}
                                onMouseDown={handleMouseDownJoin}
                                onMouseUp={handleMouseUpJoin}
                                onClick={() => navigate(joinMeetingPath)}
                            ></Button>
                            <Text style={{ marginTop: '8px' }}>参加会议</Text>
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginLeft: '40px' }}>
                            <Button
                                type="primary"
                                shape="circle"
                                icon={<VideoCameraOutlined style={{ fontSize: '20px' }} />}
                                size="large"
                                style={buttonStyle(hoveredCreate, activeCreate)}
                                onMouseEnter={handleMouseEnterCreate}
                                onMouseLeave={handleMouseLeaveCreate}
                                onMouseDown={handleMouseDownCreate}
                                onMouseUp={handleMouseUpCreate}
                                onClick={() => navigate(newVideoPath)}
                            ></Button>
                            <Text style={{ marginTop: '8px' }}>创建会议</Text>
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
}
export default Svideo;